<template>
    <!-- 如果使用这个模式的话，就不能用父子组件 -->
    <!-- <blank-layout>
        <router-view></router-view>
    </blank-layout>
    <main-layout>
        <router-view></router-view>
    </main-layout> -->
    <!-- 如果系统出现多个布局组件，采用动态组件 -->
    <!-- <component :is="layoutName" :title="$route.meta.title" :showHome="$route.meta.home">
        <router-view></router-view>
    </component> -->
    <router-view></router-view>
</template>

<script>
    export default {
        // 页面的布局组件由当前的路由来决定 -- 通过路由计算得到当前布局组件的名字
        computed: {
            layoutName() {
                return this.$route.meta.layout || 'main-layout'
            }
        }
    }
</script>